<template>
  <view class="container">
    <customtop top_title="实名认证"></customtop>
    <view class="form">
      <view class="form-item">
        <view class="label">真实姓名</view>
        <input
          class="input-text"
          placeholder-class="placeholder-class"
          placeholder="请输入本人姓名"
        />
      </view>
      <view class="form-item">
        <view class="label">身份证号</view>
        <input
          class="input-text"
          placeholder-class="placeholder-class"
          placeholder="请输入本人身份证号"
        />
      </view>
      <view class="form-item">
        <view class="label">手机号码</view>
        <view class="input-text">
          {{ user.phone }}
        </view>
      </view>
      <view class="form-item">
        <view class="label">验证码</view>
        <input
          class="input-text code"
          placeholder="请输入验证码"
          placeholder-class="placeholder-class"
        />
        <view class="btn" @click="startCountdown">
          <text v-if="countdown === 60 || countdown === 0">{{ codeText }}</text>
          <text class="code" v-else>{{ countdown }}</text>
        </view>
      </view>
      <view class="hint">
        <u-icon size="20" color="#c54e48" name="info-circle"></u-icon>
        <text>支付1元服务费即可开始认证</text>
      </view>
    </view>
  </view>
</template>
<script>
import customtop from "@/components/customtop.vue";
import { request } from "@/utils/http.js";

export default {
  components: { customtop },
  data() {
    return {
      user: {},
      codeText: "获取验证码",
      countdown: 60,
    };
  },
  onLoad(options) {
    this.getUser();
  },
  methods: {
    getUser() {
      request.post("/user/getLoginUser").then((res) => {
        if (res.data.id) {
          this.user = res.data;
        }
      });
    },
    startCountdown() {
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown === 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  height: 100%;
  background: linear-gradient(to bottom, #0054fc, #fff);
}
.form {
  background-color: #fff;
  padding: 30rpx 40rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  margin-top: 400rpx;
  .form-item {
    display: flex;
    align-items: center;
    .label {
      width: 180rpx;
      font-size: 28rpx;
    }
    .input-text {
      border-bottom: 1rpx solid #f7f7f7;
      padding: 10rpx 20rpx;
      height: 70rpx;
      line-height: 70rpx;
    }
    .code {
      width: 150rpx;
    }
    .btn {
      width: 130rpx;
      font-size: 23rpx;
      color: #fff;
      background-color: #a4cffa;
      padding: 15rpx 10rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      margin-left: 25rpx;
      text-align: center;
    }
    .placeholder-class {
      font-size: 24rpx;
    }
  }
  .hint {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #d96459;
    background-color: #ffedeb;
    margin: 30rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;

    text {
      margin-left: 10rpx;
    }
  }
}
</style>
